<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div class="category_header">
                    <span>销售额类别占比</span>
                    <el-radio-group  v-model="categoryValue" size="mini">
                        <el-radio-button label="全部渠道" ></el-radio-button>
                        <el-radio-button label="线上"></el-radio-button>
                        <el-radio-button label="门店"></el-radio-button>
                    </el-radio-group>
                </div>
            </div>
            <!-- 饼图 -->
            <div>
                <div class="charts" ref="charts"></div>
            </div>
        </el-card>
    </div>
</template>

<script>
// 引入echarts
import * as echarts from 'echarts'
export default {
    name: "Category",
    data(){
        return {
            categoryValue:'全部渠道',
        }
    },
    mounted() {
        let myEcharts = echarts.init(this.$refs.charts)
        myEcharts.setOption({
            title:{
                text:'',
                subtext:'',
                left:'center',
                top:'center'
            },
            tooltip: {
                trigger: 'item'
            },
            series: [
                {
                    name: 'Access From',
                    type: 'pie',
                    radius: ['40%', '70%'],
                    avoidLabelOverlap: false,
                    itemStyle: {
                        borderRadius: 10,
                        borderColor: '#fff',
                        borderWidth: 2
                    },
                    label: {
                        show: true,
                        position: 'outside'
                    },
                    labelLine: {
                        show: true
                    },
                    data: [
                        { value: 1048, name: '视频' },
                        { value: 735, name: '直播' },
                        { value: 580, name: '游戏' },
                        { value: 484, name: '舞蹈' },
                        { value: 300, name: '唱跳' }
                    ]
                }
            ],
        })
        myEcharts.on('mouseover',  (params)=>  {
            // console.log(params);
            // 获取到鼠标移上去的那条数据
            const {name,value} = params.data
            // 重新设置标题
            myEcharts.setOption({
                title:{
                    text:name,
                    subtext:value
                }
            })
        });
    }
}
</script>

<style scoped>
.category_header {
    display: flex;
    /* 对称分部*/
    justify-content: space-between;
    /* 垂直居中 */
    align-items:center;
}
.charts {
    width: 100%;
    height: 300px;
}
</style>
